<script language="javascript" src="http://update.videoegg.com/js/Player.js"></script>
<script language="javascript" src="http://<cms::var type="global" name="imgserver">/js/videoEgg.js"></script>

<style type="text/css">
	#respondbox { }
	#respondbox #text { display: block;}
	#respondbox #videoPicker { display: none; }
	#respondbox #photoPicker { display: none;} 
	#respondbox .tabs { text-align: left; }
	#respondbox .tabs a { background: #336699; padding: 5px; padding-bottom: 2px; color: #FFF; }
	#respondbox .tabs a.active { background: #666; }
	#respondbox .tabs a:hover { background: #0A6; }
    #respondheader { background: url(http://<cms::var type="global" name="imgserver">/img/topicnavbottom.gif) repeat-x #F0F0F0 bottom; border-top: 1px solid #CCC; padding: 5px;}


</style>

<script>

function showPanel(id) {

	document.getElementById('text').style.display='none';
    document.getElementById('photoPicker').style.display='none';
    document.getElementById('videoPicker').style.display='none';
	document.getElementById(id).style.display='block';

    document.getElementById('text_tab').className='';
    document.getElementById('photoPicker_tab').className='';
    document.getElementById('videoPicker_tab').className='';
	document.getElementById(id + "_tab").className='active';

	return false;
}
function validateAnswer() {

    if (document.getElementById("answer").value == "") {
        errorBox("Your answer is blank!  You've got to <i>say</i> something before posting.");
        return false;
    } else {
        return true;
    }

function adjustIFrameSize (iframeWindow) {
	if (iframeWindow.document.height) {
		var iframeElement = document.getElementById
		(iframeWindow.name);
		iframeElement.style.height = iframeWindow.document.height + 'px';
		iframeElement.style.width = iframeWindow.document.width + 'px';
	}
	else if (document.all) {
		var iframeElement = document.all[iframeWindow.name];
		if (iframeWindow.document.compatMode &&
		iframeWindow.document.compatMode != 'BackCompat') 
		{
			iframeElement.style.height = 
			iframeWindow.document.documentElement.scrollHeight + 5 + 'px';
			iframeElement.style.width = 
			iframeWindow.document.documentElement.scrollWidth + 5 + 'px';
		}
		else {
			iframeElement.style.height = 
			iframeWindow.document.body.scrollHeight + 5 + 'px';
			iframeElement.style.width = 
			iframeWindow.document.body.scrollWidth + 5 + 'px';
		}
	}
}

}
function deleteAnswerConfirm() {
	var c = new Array();
	c.push('<form method="post">');
	c.push('<input type="hidden" id="deleteId" name="deleteId" value="<cms::var type="response" name="id">"/>');
	c.push('</form>');
	c.push('<div class="infoBoxOptionWrapper"><a href="#" onclick="this.className=\'infoBoxOptionOn\';deleteAnswer();return false;" class="infoBoxOption"><div class="ibp">Delete Answer</div></a>');
	c.push('<div class="infoBoxOptionDesc">Clicking this will remove your answer and any thumbs (up and down) you may have gotten for this answer.  Choose wisely!</div></div><br clear="all"/>');
	c.push('<div class="infoBoxOptionWrapper"><a href="#" onclick="this.className=\'infoBoxOptionOn\';InfoBox.clear();return false;" class="infoBoxOption"><div class="ibp">Abort! Abort!</div></a>');
	c.push('<div class="infoBoxOptionDesc">No!  Don\'t delete this answer!!!</div></div><br clear="all"/>');
	InfoBox.draw(c.join(''),'Delete your answer?');
}
var deleteTimeout;
var image = new Image();
image.src = "http://<cms::var type="global" name="imgserver">/img/wheel.gif";
function deleteAnswer() {
	var id = $('deleteId').value;
	apiRequest('user.deleteAnswer','questionresponseId='+id,answerDeleted);
	InfoBox.updateContent('<div id=\"deleteMsg\"><center>Deleting, please hold.<br/><img src=\"http://<cms::var type="global" name="imgserver">/img/wheel.gif\"/><br/></center></div>');
	deleteTimeout = setTimeout('abortDelete()',10000);
}
function answerDeleted(r) {
	clearTimeout(deleteTimeout);
	var response = r.responseXML;
	var c = new Array();
	if (response.getElementsByTagName('error').length) {
		c.push(response.getElementsByTagName('error').getAttribute('msg'));
		c.push('<br/>Please try again in a few seconds.');
		c.push("<div class='infoBoxFooter'><a href='#' class='infoBoxOK' title='OK!' onClick='InfoBox.clear();return false;'>&nbsp;</a></div>");
		InfoBox.updateContent(c.join(''));
	} else {
		InfoBox.clear();
		c.push('Delete was successful!');
		c.push("<div class='infoBoxFooter'><a href='#' class='infoBoxOK' title='OK!' onClick='InfoBox.clear();return false;'>&nbsp;</a></div>");
		InfoBox.updateContent(c.join(''));
		setTimeout('InfoBox.clear();',20000);
	}
}
function abortDelete() {
	c.push('Something went wrong, I didn\'t hear back from the server!<br/>Please try again in a few seconds.');
	c.push("<div class='infoBoxFooter'><a href='#' class='infoBoxOK' title='OK!' onClick='InfoBox.clear();return false;'>&nbsp;</a></div>");
	InfoBox.updateContent(c.join(''));
}

function pickVideo(id,path) {
	$('videoId').value = id;
	$('videopublisher').style.display='none';
	$('videopicked').style.display='inline';
	$('videoPickedThumb').innerHTML = videoEgg.getThumb(path);
}

function pickerpage(offset) {
	apiRequest('user.getVideos','offset='+offset,showPicker);
}
function showPicker(r) {
	try {
		$('pickerlist').innerHTML = r.responseText;
		r = r.responseXML;
		if (r.getElementsByTagName('less').length) {
			var less = r.getElementsByTagName('less')[0].getAttribute('value');
			$('lesslink').style.display='inline';
			$('lessclicker').onclick = function(){pickerpage(less);return false;};
		} else {
			$('lesslink').style.display='none';
		}
		
		if (r.getElementsByTagName('more').length) {
			var more = r.getElementsByTagName('more')[0].getAttribute('value');
			$('morelink').style.display='inline';
			$('moreclicker').onclick = function(){pickerpage(more);return false;};
		} else {
			$('morelink').style.display='none';
		}
	} catch(e) { alert('error SPR1: '+e.message) }
}


</script>


<h1 id="pagetitle">Questions &#187; Preview / Edit Your Response</h1>

<div style="margin-bottom: 20px; margin-top: 10px;">
<div style="width: 280px; margin-right: 20px; float: left;">
	
	<cms::if type="page" name="saved"><h2 class="blue" style="background: #FFFF99; padding: 5px;">Your answer has been saved!</h2></cms::if>	
	
	<P>Your answer to the question, "<B><cms::var type="question" name="question"></b>" appears to the right.  This is
	how it will appear on the question homepage as well as on your profile.

	<ul class="bullets">
    <li><A href="/qow.pl?question=<cms::var type="question" name="id">">View & Rate Other Answers!</a></li>
    <li><a href="#respond">Edit or Update your response</a></li>
	<li><a href="/invite/">Invite your friends to respond</a></li>
	</ul>


	<P>Every answer you post can earn you points!  A thumbs-up on your answer will earn you <b>2 points!</b></p>
	
	<ul class="bullets">
		<li><A href="/weekly/questions/">Answer more questions!</a></li>
		<li><A href="/weekly/">Check out the other contests...</a></li>
	</ul>

</div>
<div style="width: 400px; margin-left: 300px;">

		<div style="width: 400px; background: #F0F0F0; text-align: left;" id="myresponse">
			<div class="pad10">
				<p><B><cms::var type="question" name="question"></b></p>
				<cms::var type="response" name="htmlanswer" paragraphs>	
			</div>
		</div>

		<div style="margin-top: 10px;"><B>Share Your Answer:</b><br />
		<span class="small">Cut and paste this url into your blog or IM to share your answer with your friends.<br />
		<textarea>http://www.MYAWESOMESITE.com/profiles/<cms::var type="user" name="linkhandle">#<cms::var type="response" name="id"></textarea></div>

</div>
<br clear="all" />
</div>


<A name="respond"></a>

<div id="respondbox">
        <div id="respondheader"><h1><cms::var type="question" name="question"></h1></div>
        <form id="questionresponse" method="post" action="/qow.pl/save" onSubmit="return validateAnswer();">
        <input type="hidden" name="questionId" value="<cms::var type="question" name="id">">
        <input type="hidden" name="responseId" value="<cms::var type="response" name="id">">
        <input type="hidden" name="photoId" value="<cms::var type="response" name="photoId">" id="photoId">
		<input type="hidden" name="videoId" value="<cms::var type="response" name="videoId">" id="videoId">

		<div class="tabs">
		<a href="#" id="text_tab" onClick="showPanel('text'); return false;" class="active">Write Stuff</a>
		<a href="#" id="photoPicker_tab" onClick="showPanel('photoPicker'); return false;">Add Picture</a>
		<a href="#" id="videoPicker_tab" onClick="showPanel('videoPicker'); return false;">Add Video</a>
		</div>


		<div id="text">
            <div class="small" style="background: #666; padding: 10px; color: #FFF; text-align: center; margin-bottom: 10px;">Some HTML is ok: bold, italic and links.  Put a blank line in your response to create a new paragraph.</div>
			<textarea name="answer" id="answer"><cms::var type="response" name="answer"></textarea>
			</div>
			<div style="padding: 10px;">
					<cms::if type="response" name="photoId" equals="0" nest>
						<iframe id="photoPicker" src="/photos.pl/minipicker" style="width: 100%; height: 180px; border: 0px;"></iframe>
					</cms::if type="response" name="photoId">
					<cms::ifnot type="response" name="photoId" equals="0" nest>
						<iframe id="photoPicker" src="/photos.pl/picked?id=<cms::var type="response" name="photoId">" style="width: 100%; height: 180px; border: 0px;"></iframe>
					</cms::ifnot type="response" name="photoId">
			
					<div id="videoPicker">
						<div id="videopicked" style="display:<cms::if type="response" name="videoId" equals="0" nest>none</cms::if type="response" name="videoId">;">
							<div style="width: 110px; float: left;" id="videoPickedThumb">
								<script>
									if ('<cms::var type="video" name="path">') {videoEgg.drawThumb('<cms::var type="video" name="path">',100);}
								</script>
							</div>
							<div style="width: 400px; float: left; margin-left: 10px; padding-top: 10px;">
								<span class="medium">You have chosen the video to the left!</span>
								<p><A href="#" onclick="document.getElementById('videoId').value='0'; $('videopicked').style.display='none';$('videopublisher').style.display='block';return false;">Choose another one?</a></p>
								<P><a href="#" onClick="document.getElementById('videoId').value='0'; $('videopicked').style.display='none';$('videopublisher').style.display='block';return false;">Remove Video</a></p>
							</div>
							<script>
							// set the main photo id
								document.getElementById('videoId').value = '<cms::var type="video" name="id">';
							</script>
						</div>
						<div id="videopublisher" style="display:<cms::if type="video" name="id" nest>none</cms::if type="video" name="id">;">
							<cms::var type="page" name="videoPublisher">
							<br clear="all" />
								<span id="lesslink" <cms::ifnot type="page" name="less">style="display:none;"</cms::ifnot>>
								<A id="lessclicker" href="#" onclick="pickerpage(<cms::var type="page" name="less">);return false;"><img src="http://<cms::var type="global" name="imgserver">/img/picker_newer.gif" width="25" height="100" alt="newer videos" border="0" class="pickerbutton"></a>
								</span>

							<div class="small">Click a video to pick it for the contest!</div>
							<span id="pickerlist">
							<cms::fancylist over="videos">

								<a href="#" onclick="pickVideo(<cms::var type="video" name="id">,'<cms::var type="video" name="path">');return false;">
								<script language="javascript">
									videoEgg.drawThumb('<cms::var type="video" name="path">',100);
								</script>
								</a>

							</cms::fancylist>
							</span>

							<cms::if type="page" name="more">
								<span id="morelink">
								<A id="moreclicker" href="#" onclick="pickerpage(<cms::var type="page" name="more">);return false;"><img src="http://<cms::var type="global" name="imgserver">/img/picker_older.gif" width="25" height="100" alt="older videos" border="0" class="pickerbutton"></a>
								</span>
							</cms::if>
							<cms::ifnot type="page" name="more">
							   <img src="http://<cms::var type="global" name="imgserver">/img/blank.gif" width="25" height="100" class="pickerbutton">
							</cms::ifnot>
						</div>
						<br clear="all"/>
					</div>
			</div>


         <input type="submit" value="Post Your Response!" class="gobutton"
		<br clear="all"/>
		<a href="#" onclick="deleteAnswerConfirm();return false;">Delete your answer</a>
    </div>
</div>

